<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <Treetools :data="company" :is-root="true" />
        <hr>
        <!-- 树形结构 -->
        <el-tree :data="departs" :props="treeOptions">
          <!-- 作用域插槽 第一个参数为插槽名 v-slot='插槽名'  slot-scope="接收到的回传数据（遍历后的回传）" -->
          <template slot-scope="scope">
            <Treetools
              :data="scope.data"
              @deldepartment="getdepartment"
              @addDepartment="addDepartment"
              @editDepartment="editDepartment"
            />
          </template>
        </el-tree>
        <addDept
          ref="addDept"
          :show-dialog.sync="showDialog"
          :node="node"
          @addDepartments="getdepartment"
        />
      </el-card>

    </div>
  </div>
</template>

<script>
import Treetools from '@/views/departments/components/tree-tools'
import { getdepartment } from '@/api/departments'
// 弹窗
import addDept from '@/views/departments/components/add-dept'
export default {
  components: {
    Treetools, addDept
  },
  data() {
    return {
      company:
        { name: 'XXXXX公司', manager: '负责人', id: '' },
      departs: [],
      treeOptions: {
        label: 'name'
      },
      showDialog: false,
      node: {}
    }
  },
  created() {
    this.getdepartment()
  },
  methods: {
    // 编辑弹窗 调用子组件的数据渲染事件 使用ref
    async editDepartment(data) {
      this.showDialog = true
      // 调用子组件的事件（add-dept的数据渲染事件）
      this.$refs.addDept.getDeptDetailById(data.id)
      this.node = data
    },

    // 展示弹窗事件
    addDepartment(data) {
      this.showDialog = true
      // 传给弹窗的值
      this.node = data
    },

    async getdepartment() {
      const { depts } = await getdepartment()
      // 调用递归 传入第一层数据的pid
      this.departs = this.listTotreeData(depts, '')
    },
    /* listTotreeData(list, pid) {
      const res = []
      // 遍历list,找到第一层数据
      list.forEach(item => {
        // 判断当前的item.pid是否等于传入的pid找到第一层数据
        if (item.pid === pid) {
          // 判断是否有下一层数据 如果有添加到children数组中
          // 使用上一层数据的id来与下一层的pid进行判断判断
          // 递归开始 传入数据
          const children = this.listTotreeData(list, item.id)
          // 如果children为0那么没有下一级 结束递归
          if (children.length > 0) {
            // 把当前的children添加到每一个item当中 （让有下一层数据的数据为children数组）
            item.children = children
          }
          // 如果是,那么就添加到数组中
          res.push(item)
        }
      })
      return res
    } */
    listTotreeData(list, pid) {
      // 自己找部门
      // 遍历list 如果item.pid不为空 那么就是子集 找到父元素 把自己加上
      list.forEach(item => {
        if (item.pis !== pid) {
          // 找父元素 如果父元素的id=子元素的pid说明找到了上级 把自己加上
          const parent = list.find(el => el.id === item.pid)
          if (parent) {
            parent.children = parent.children || []
            parent.children.push(item)
          }
        }
      })
      // 返回除去找到自己部门的子元素
      return list.filter(item => item.pid === pid)
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
